{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bbe23f7d-bd98-4b92-94b0-8bc795cf02b0",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "9f91ece1-05ca-4958-a061-7b69903ff5b7",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "aaaaa\n"
     ]
    }
   ],
   "source": [
    "x = 5\n",
    "x = \"a\" * x\n",
    "print(x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "414345bb-c566-485a-9d11-87f955c649fb",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "57787ef0-b5b5-4992-8f7a-22a8a4b26b81",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "aaaaa\n"
     ]
    }
   ],
   "source": [
    "x = 5\n",
    "x = \"a\" * x\n",
    "print(x)\n",
    "x = 9"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cb066d0b-36f5-416f-870b-3548ccf2dcfe",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "de57b3e6-e45c-4240-bc9d-79b2c19aeb7d",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "c89e950f-379c-45ec-bc89-957db580186d",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "aaaaa\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "27"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "x = 5\n",
    "x = \"a\" * x\n",
    "print(x)\n",
    "x = 9\n",
    "x * 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "3ae9c844-e567-41c5-82cf-07c0231bf222",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[4, 2, 9]"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a = [4, 2, 9]\n",
    "a"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "5fa5ffd3-f59c-49ac-98fa-13545790a5be",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "9"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.pop()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "d7721744-b83e-4d13-850a-9767c64d0e64",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[4, 2]"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "61c41c11-8eb5-48a9-9b25-4ae62470f513",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[4, 2]\n"
     ]
    }
   ],
   "source": [
    "print(a)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "22920b6b-3b2e-4dff-9dae-131c2ec821e1",
   "metadata": {},
   "outputs": [],
   "source": [
    "a.append(7)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "b5ffabcb-7f75-4c45-8678-2bfe42949313",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[4, 2, 7]"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "ba2cd97e-6970-4cd8-8539-4f21f29a3614",
   "metadata": {},
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name '_8' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[31m---------------------------------------------------------------------------\u001b[39m",
      "\u001b[31mNameError\u001b[39m                                 Traceback (most recent call last)",
      "\u001b[36mCell\u001b[39m\u001b[36m \u001b[39m\u001b[32mIn[10]\u001b[39m\u001b[32m, line 1\u001b[39m\n\u001b[32m----> \u001b[39m\u001b[32m1\u001b[39m \u001b[43m_8\u001b[49m\n",
      "\u001b[31mNameError\u001b[39m: name '_8' is not defined"
     ]
    }
   ],
   "source": [
    "_8"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "b3136262-0ae7-4ca3-a1e5-79bbaec6e5e3",
   "metadata": {},
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name '_8' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[31m---------------------------------------------------------------------------\u001b[39m",
      "\u001b[31mNameError\u001b[39m                                 Traceback (most recent call last)",
      "\u001b[36mCell\u001b[39m\u001b[36m \u001b[39m\u001b[32mIn[11]\u001b[39m\u001b[32m, line 1\u001b[39m\n\u001b[32m----> \u001b[39m\u001b[32m1\u001b[39m \u001b[43m_8\u001b[49m * \u001b[32m9\u001b[39m\n",
      "\u001b[31mNameError\u001b[39m: name '_8' is not defined"
     ]
    }
   ],
   "source": [
    "_8 * 9"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "0ea3f118-77a1-4511-93ad-abae3e0be5df",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "hello world\n",
      "hello world\n",
      "hello world\n",
      "hello world\n",
      "hello world\n",
      "hello world\n"
     ]
    },
    {
     "ename": "KeyboardInterrupt",
     "evalue": "",
     "output_type": "error",
     "traceback": [
      "\u001b[31m---------------------------------------------------------------------------\u001b[39m",
      "\u001b[31mKeyboardInterrupt\u001b[39m                         Traceback (most recent call last)",
      "\u001b[36mCell\u001b[39m\u001b[36m \u001b[39m\u001b[32mIn[12]\u001b[39m\u001b[32m, line 4\u001b[39m\n\u001b[32m      2\u001b[39m \u001b[38;5;28;01mwhile\u001b[39;00m \u001b[38;5;28;01mTrue\u001b[39;00m:\n\u001b[32m      3\u001b[39m     \u001b[38;5;28mprint\u001b[39m(\u001b[33m'\u001b[39m\u001b[33mhello world\u001b[39m\u001b[33m'\u001b[39m)\n\u001b[32m----> \u001b[39m\u001b[32m4\u001b[39m     \u001b[43mtime\u001b[49m\u001b[43m.\u001b[49m\u001b[43msleep\u001b[49m\u001b[43m(\u001b[49m\u001b[32;43m5\u001b[39;49m\u001b[43m)\u001b[49m\n",
      "\u001b[31mKeyboardInterrupt\u001b[39m: "
     ]
    }
   ],
   "source": [
    "import time\n",
    "while True:\n",
    "    print('hello world')\n",
    "    time.sleep(5)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "eceb37fa-d909-4e6e-967e-2162ef451451",
   "metadata": {},
   "outputs": [],
   "source": [
    "x = 39"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "933a9a19-9cc4-4854-a8ef-551cf9f8e208",
   "metadata": {},
   "source": [
    "x= 3\n",
    "print(x ** 2)\n",
    "\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "4d900780-6ecb-4252-b496-84bb62495f9d",
   "metadata": {},
   "source": [
    "# 这是一个 Markdown 示例文档\n",
    "\n",
    "## 一、标题分级（共六级）\n",
    "# 一级标题\n",
    "## 二级标题\n",
    "### 三级标题\n",
    "#### 四级标题\n",
    "##### 五级标题\n",
    "###### 六级标题\n",
    "\n",
    "## 二、列表语法\n",
    "### 1. 无序列表（使用 `-` 或 `*`）\n",
    "- 列表项1\n",
    "- 列表项2\n",
    "  - 子列表项1\n",
    "  - 子列表项2\n",
    "* 列表项3\n",
    "\n",
    "### 2. 有序列表（使用数字加点）\n",
    "1. 第一项\n",
    "2. 第二项\n",
    "3. 第三项\n",
    "\n",
    "\n",
    "## 三、表格语法\n",
    "| 表头1       | 表头2       | 表头3       |\n",
    "|-------------|-------------|-------------|\n",
    "| 内容居左    | 内容居中    | 内容居右    |\n",
    "| 单元格1     | 单元格2     | 单元格3     |\n",
    "| 长文本单元格<br>（换行用 `<br>`） | 合并单元格可通过 Markdown 插件实现 | 表格支持数字、符号等混合内容 |\n",
    "\n",
    "\n",
    "## 四、代码语法\n",
    "### 1. 行内代码\n",
    "使用反引号包裹：`print(\"Hello World\")`，适用于引用单个函数或变量。\n",
    "\n",
    "### 2. 代码块（支持语法高亮，需指定语言）\n",
    "```python\n",
    "# Python 示例代码\n",
    "def calculate_sum(a, b):\n",
    "    \"\"\"计算两数之和\"\"\"\n",
    "    return a + b\n",
    "\n",
    "result = calculate_sum(10, 20)\n",
    "print(f\"结果：{result}\")\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c563ec9c-605c-4e3b-8b71-6250b8509722",
   "metadata": {},
   "source": [
    "# 📊 数据分析报告：用户行为分析\n",
    "\n",
    "## 一、分析背景\n",
    "### 1. 项目目标\n",
    "- 理解用户在网站的浏览行为模式\n",
    "- 识别关键转化路径\n",
    "- 优化页面交互体验\n",
    "\n",
    "### 2. 数据来源\n",
    "- 服务器日志：记录用户访问时间、页面停留时长等\n",
    "- 数据库表单：存储用户注册信息、购买记录\n",
    "- 第三方工具：Google Analytics 行为数据\n",
    "\n",
    "\n",
    "## 二、核心指标对比\n",
    "| 指标名称       | 计算方式                          | 行业均值 | 当前值 | 趋势   |\n",
    "|----------------|-----------------------------------|----------|--------|--------|\n",
    "| 转化率        | 转化用户数 / 总访问用户数         | 2.5%     | 3.2%   | 🔼 上升 |\n",
    "| 平均停留时长   | 总停留时间 / 访问次数             | 180s     | 210s   | ➡️ 稳定 |\n",
    "| 跳出率        | 仅访问一个页面就离开的用户占比    | 45%      | 38%    | 🔽 下降 |\n",
    "\n",
    "*数据说明：统计周期为2025年1月-3月*\n",
    "\n",
    "\n",
    "## 三、用户行为可视化\n",
    "### 1. 页面访问热力图\n",
    "![页面热力图](https://picsum.photos/600/400?random=123)  \n",
    "*（图示：颜色越深代表点击量越高，主要交互区域集中在中部功能按钮）*\n",
    "\n",
    "### 2. 转化漏斗模型graph TD\n",
    "    A[首页访问] --> B{是否登录?}\n",
    "    B -->|是| C[商品浏览]\n",
    "    B -->|否| D[注册引导]\n",
    "    C --> E[加入购物车]\n",
    "    E --> F[提交订单]\n",
    "    F --> G[支付成功]\n",
    "\n",
    "## 四、关键代码示例\n",
    "### 1. 数据加载与预处理import pandas as pd\n",
    "\n",
    "# 读取原始数据\n",
    "df = pd.read_csv(\"user_behavior.csv\")\n",
    "\n",
    "# 数据清洗\n",
    "df = df.dropna(subset=[\"user_id\", \"timestamp\"])\n",
    "df[\"date\"] = pd.to_datetime(df[\"timestamp\"]).dt.date\n",
    "### 2. 留存率计算函数def calculate_retention(df, user_col=\"user_id\", date_col=\"date\"):\n",
    "    \"\"\"\n",
    "    计算用户次日留存率\n",
    "    :param df: 包含用户ID和日期的DataFrame\n",
    "    :return: 留存率百分比\n",
    "    \"\"\"\n",
    "    user_first_visit = df.groupby(user_col)[date_col].min().reset_index()\n",
    "    merged_df = pd.merge(df, user_first_visit, on=user_col, suffixes=(\"\", \"_first\"))\n",
    "    merged_df[\"days_since_first\"] = (merged_df[date_col] - merged_df[date_col + \"_first\"]).dt.days\n",
    "    retention = merged_df[merged_df[\"days_since_first\"] == 1][user_col].nunique() / merged_df[user_col].nunique()\n",
    "    return round(retention * 100, 2)\n",
    "\n",
    "## 五、数学公式推导\n",
    "### 1. 信息熵计算公式\n",
    "$$\n",
    "H(X) = -\\sum_{i=1}^{n} p(x_i) \\log_2 p(x_i)\n",
    "$$\n",
    "其中：\n",
    "- \\( p(x_i) \\) 是事件 \\( x_i \\) 发生的概率\n",
    "- \\( n \\) 是事件的种类数\n",
    "\n",
    "### 2. 线性回归方程\n",
    "多元线性回归模型表达式为：  \n",
    "$$\n",
    "\\hat{y} = \\beta_0 + \\beta_1 x_1 + \\beta_2 x_2 + \\dots + \\beta_n x_n + \\epsilon\n",
    "$$\n",
    "- \\( \\hat{y} \\)：预测值  \n",
    "- \\( \\beta_i \\)：回归系数  \n",
    "- \\( \\epsilon \\)：误差项\n",
    "\n",
    "\n",
    "## 六、结论与建议\n",
    "1. **核心发现**  \n",
    "   - 移动端访问占比提升至65%，需优化移动端界面适配  \n",
    "   - 晚间20:00-22:00为访问高峰，建议增加时段性运营活动  \n",
    "\n",
    "2. **下一步计划**  \n",
    "   - 开展A/B测试，验证新按钮位置对转化率的影响  \n",
    "   - 建立用户分群模型，实现个性化推荐  \n",
    "   - [查看详细数据看板](https://example.com/dashboard)（内部链接）\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bba1200a-d7fe-462a-b589-fa9e33c5f393",
   "metadata": {},
   "source": [
    "Jupyter的发展历程如下：\n",
    "- **IPython的诞生（2001年）**：Fernando Pérez在2001年发起了IPython项目，旨在为Python编程语言打造一个更强大的交互式计算环境，最初主要是增强Python的交互式解释器功能，方便开发者进行代码测试和调试，比如提供了更友好的命令行交互方式、自动补全等功能，让科学家们能更高效地进行实验。\n",
    "- **IPython功能扩展与Notebook出现（2007 - 2011年）**：2007年，IPython团队开始着手开发基于IPython的笔记本系统，用于将文本、计算和可视化相结合。2011年，第一个版本的IPython Notebook发布，它提供了基于Web的界面，使用户可以在单个文档中编写代码、文本和多媒体内容，这一功能极大地便利了科学家们分享工作成果，并通过交互性的图形和表格展示结果。同时，IPython也逐渐开始支持其他编程语言，如R、Julia等，其功能从单纯的Python交互环境向支持多语言的计算平台扩展。\n",
    "- **Jupyter的诞生（2014年）**：随着IPython支持的语言越来越多，2014年，IPython项目团队决定将项目更名为Jupyter，以更好地体现其对多语言支持的特性。“Ju”代表Julia，“Py”代表Python，“ter”代表R，这三种语言是当时数据科学领域最常用的编程语言。此后，Jupyter成为一个独立的项目，IPython则继续作为Python的 shell 和 Jupyter的内核存在，而 Notebook 等与语言无关的部分则归到了Jupyter名下。\n",
    "- **Jupyter的发展与壮大（2015年 - 至今）**：2015年，约有20万个Jupyter Notebook在GitHub上可用。同年，来自多个基金会的600万美元联合资助，推动了Jupyter核心工具功能的扩展以及JupyterLab的创建。2018年，JupyterLab发布了第一个稳定版本，它提供了比经典 Notebook 界面更灵活的用户界面和更多功能，标志着Jupyter在用户体验和功能丰富度上的进一步提升。到2021年，GitHub上的Jupyter Notebook数量已近1000万个，其应用领域也不断拓展，涵盖了科研、教育、企业开发等多个领域。2021年，《自然》杂志将Jupyter列为改变科学的十大计算项目之一。2023年8月，Jupyter AI发布，这个扩展将生成式人工智能集成到Jupyter Notebook中，使用户能够解释和生成代码、纠正错误、总结内容、查询本地文件以及根据自然语言提示生成完整的笔记本，为Jupyter的功能带来了新的突破。"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0e29883b-893b-4319-873f-7fe44bbedbf3",
   "metadata": {},
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
    "    <script src=\"https://cdn.tailwindcss.com\"></script>\n",
    "    <link href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css\" rel=\"stylesheet\">\n",
    "    <title>示例网页</title>\n",
    "</head>\n",
    "\n",
    "<body class=\"bg-gray-100 font-sans\">\n",
    "    <!-- 头部 -->\n",
    "    <header class=\"bg-blue-500 text-white p-4\">\n",
    "        <h1 class=\"text-3xl font-bold\">欢迎来到示例网页</h1>\n",
    "    </header>\n",
    "    <!-- 导航栏 -->\n",
    "    <nav class=\"bg-gray-800 text-white\">\n",
    "        <ul class=\"flex space-x-4 p-4\">\n",
    "            <li><a href=\"#\" class=\"hover:text-blue-300\">主页</a></li>\n",
    "            <li><a href=\"#\" class=\"hover:text-blue-300\">关于</a></li>\n",
    "            <li><a href=\"#\" class=\"hover:text-blue-300\">联系我们</a></li>\n",
    "        </ul>\n",
    "    </nav>\n",
    "    <!-- 内容区域 -->\n",
    "    <main class=\"p-4\">\n",
    "        <section class=\"bg-white p-4 rounded shadow-md\">\n",
    "            <h2 class=\"text-2xl font-bold mb-2\">主要内容</h2>\n",
    "            <p class=\"text-gray-700\">这是一个示例网页，展示了基本的 HTML 结构和 Tailwind CSS 的使用。你可以根据需要修改和扩展这个页面。</p>\n",
    "            <a href=\"#\" class=\"mt-4 inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600\">了解更多</a>\n",
    "        </section>\n",
    "        <section class=\"mt-4 bg-white p-4 rounded shadow-md\">\n",
    "            <h2 class=\"text-2xl font-bold mb-2\">图片展示</h2>\n",
    "            <img src=\"https://picsum.photos/800/400\" alt=\"示例图片\" class=\"w-full h-auto rounded\">\n",
    "        </section>\n",
    "    </main>\n",
    "    <!-- 页脚 -->\n",
    "    <footer class=\"bg-gray-800 text-white p-4 text-center\">\n",
    "        <p>&copy; 2025 示例网页版权所有</p>\n",
    "    </footer>\n",
    "</body>\n",
    "\n",
    "</html>\n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "01c89b52-7163-425a-81cd-2c302a304ca9",
   "metadata": {},
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
    "    <title>无 CSS 的 HTML 示例</title>\n",
    "</head>\n",
    "\n",
    "<body>\n",
    "    <h1>这是一个主标题</h1>\n",
    "    <p>这是一段普通的段落文本。HTML 是用于创建网页的标准标记语言。</p>\n",
    "    <h2>这是一个副标题</h2>\n",
    "    <p>这里我们可以看到 HTML 标签如何结构化网页内容。</p>\n",
    "    <a href=\"https://www.example.com\">这是一个指向示例网站的链接</a>\n",
    "    <h3>无序列表</h3>\n",
    "    <ul>\n",
    "        <li>列表项 1</li>\n",
    "        <li>列表项 2</li>\n",
    "        <li>列表项 3</li>\n",
    "    </ul>\n",
    "    <h3>有序列表</h3>\n",
    "    <ol>\n",
    "        <li>第一项</li>\n",
    "        <li>第二项</li>\n",
    "        <li>第三项</li>\n",
    "    </ol>\n",
    "</body>\n",
    "\n",
    "</html>\n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "16f39648-f72f-4255-90b6-434bdf267ec0",
   "metadata": {},
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
    "    <script src=\"https://cdn.tailwindcss.com\"></script>\n",
    "    <link href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css\" rel=\"stylesheet\">\n",
    "    <title>复杂表格示例</title>\n",
    "    <style>\n",
    "        /* 固定表头样式 */\n",
    "        thead th {\n",
    "            position: sticky;\n",
    "            top: 0;\n",
    "            background-color: white;\n",
    "            z-index: 1;\n",
    "        }\n",
    "    </style>\n",
    "</head>\n",
    "\n",
    "<body class=\"bg-gray-100 p-8\">\n",
    "    <div class=\"container mx-auto bg-white p-4 rounded shadow-md\">\n",
    "        <!-- 搜索框 -->\n",
    "        <div class=\"mb-4 flex justify-between items-center\">\n",
    "            <input type=\"text\" id=\"searchInput\" placeholder=\"搜索...\"\n",
    "                class=\"border border-gray-300 p-2 rounded w-1/2 focus:outline-none focus:ring-blue-500 focus:border-blue-500\">\n",
    "            <button id=\"resetSearch\" class=\"bg-blue-500 hover:bg-blue-600 text-white p-2 rounded\">重置搜索</button>\n",
    "        </div>\n",
    "        <!-- 表格 -->\n",
    "        <div class=\"overflow-auto max-h-96\">\n",
    "            <table class=\"w-full border-collapse border border-gray-300\">\n",
    "                <thead>\n",
    "                    <tr>\n",
    "                        <th class=\"border border-gray-300 p-2\">编号</th>\n",
    "                        <th class=\"border border-gray-300 p-2\">姓名</th>\n",
    "                        <th class=\"border border-gray-300 p-2\">年龄</th>\n",
    "                        <th class=\"border border-gray-300 p-2\">邮箱</th>\n",
    "                        <th class=\"border border-gray-300 p-2\">操作</th>\n",
    "                    </tr>\n",
    "                </thead>\n",
    "                <tbody id=\"tableBody\">\n",
    "                    <tr>\n",
    "                        <td class=\"border border-gray-300 p-2\">1</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">张三</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">25</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">zhangsan@example.com</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">\n",
    "                            <button class=\"bg-green-500 hover:bg-green-600 text-white p-1 rounded mr-1\">\n",
    "                                <i class=\"fa-solid fa-pencil\"></i> 编辑\n",
    "                            </button>\n",
    "                            <button class=\"bg-red-500 hover:bg-red-600 text-white p-1 rounded\">\n",
    "                                <i class=\"fa-solid fa-trash\"></i> 删除\n",
    "                            </button>\n",
    "                        </td>\n",
    "                    </tr>\n",
    "                    <tr>\n",
    "                        <td class=\"border border-gray-300 p-2\">2</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">李四</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">30</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">lisi@example.com</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">\n",
    "                            <button class=\"bg-green-500 hover:bg-green-600 text-white p-1 rounded mr-1\">\n",
    "                                <i class=\"fa-solid fa-pencil\"></i> 编辑\n",
    "                            </button>\n",
    "                            <button class=\"bg-red-500 hover:bg-red-600 text-white p-1 rounded\">\n",
    "                                <i class=\"fa-solid fa-trash\"></i> 删除\n",
    "                            </button>\n",
    "                        </td>\n",
    "                    </tr>\n",
    "                    <tr>\n",
    "                        <td class=\"border border-gray-300 p-2\">3</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">王五</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">22</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">wangwu@example.com</td>\n",
    "                        <td class=\"border border-gray-300 p-2\">\n",
    "                            <button class=\"bg-green-500 hover:bg-green-600 text-white p-1 rounded mr-1\">\n",
    "                                <i class=\"fa-solid fa-pencil\"></i> 编辑\n",
    "                            </button>\n",
    "                            <button class=\"bg-red-500 hover:bg-red-600 text-white p-1 rounded\">\n",
    "                                <i class=\"fa-solid fa-trash\"></i> 删除\n",
    "                            </button>\n",
    "                        </td>\n",
    "                    </tr>\n",
    "                </tbody>\n",
    "            </table>\n",
    "        </div>\n",
    "        <!-- 分页 -->\n",
    "        <div class=\"mt-4 flex justify-between items-center\">\n",
    "            <div>显示 1 - 3 条记录，共 3 条</div>\n",
    "            <div>\n",
    "                <button class=\"bg-gray-300 hover:bg-gray-400 text-gray-700 p-2 rounded mr-1\">上一页</button>\n",
    "                <button class=\"bg-gray-300 hover:bg-gray-400 text-gray-700 p-2 rounded\">下一页</button>\n",
    "            </div>\n",
    "        </div>\n",
    "    </div>\n",
    "    <script>\n",
    "        const searchInput = document.getElementById('searchInput');\n",
    "        const resetSearch = document.getElementById('resetSearch');\n",
    "        const tableBody = document.getElementById('tableBody');\n",
    "        const originalRows = Array.from(tableBody.rows);\n",
    "\n",
    "        searchInput.addEventListener('input', function () {\n",
    "            const searchTerm = this.value.toLowerCase();\n",
    "            originalRows.forEach(row => {\n",
    "                const rowData = Array.from(row.cells).map(cell => cell.textContent.toLowerCase()).join(' ');\n",
    "                if (rowData.includes(searchTerm)) {\n",
    "                    row.style.display = '';\n",
    "                } else {\n",
    "                    row.style.display = 'none';\n",
    "                }\n",
    "            });\n",
    "        });\n",
    "\n",
    "        resetSearch.addEventListener('click', function () {\n",
    "            searchInput.value = '';\n",
    "            originalRows.forEach(row => {\n",
    "                row.style.display = '';\n",
    "            });\n",
    "        });\n",
    "    </script>\n",
    "</body>\n",
    "\n",
    "</html>\n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "aa96d511-928c-4819-a531-c25a32397182",
   "metadata": {},
   "source": [
    "# 复杂数学公式示例\n",
    "\n",
    "## 多元积分\n",
    "在多元微积分中，三重积分的定义如下：\n",
    "$$\n",
    "\\iiint\\limits_{V} f(x,y,z) \\,dV = \\int_{a}^{b} \\int_{c(x)}^{d(x)} \\int_{e(x,y)}^{f(x,y)} f(x,y,z) \\,dz \\,dy \\,dx\n",
    "$$\n",
    "其中 \\(V\\) 是三维空间中的一个区域，\\(f(x,y,z)\\) 是定义在 \\(V\\) 上的函数。\n",
    "\n",
    "## 傅里叶级数\n",
    "周期为 \\(2L\\) 的函数 \\(f(x)\\) 的傅里叶级数展开式为：\n",
    "$$\n",
    "f(x) = \\frac{a_0}{2} + \\sum_{n = 1}^{\\infty} \\left( a_n \\cos\\left(\\frac{n\\pi x}{L}\\right) + b_n \\sin\\left(\\frac{n\\pi x}{L}\\right) \\right)\n",
    "$$\n",
    "其中系数 \\(a_n\\) 和 \\(b_n\\) 由以下公式计算：\n",
    "$$\n",
    "a_n = \\frac{1}{L} \\int_{-L}^{L} f(x) \\cos\\left(\\frac{n\\pi x}{L}\\right) \\,dx, \\quad n = 0, 1, 2, \\cdots\n",
    "$$\n",
    "$$\n",
    "b_n = \\frac{1}{L} \\int_{-L}^{L} f(x) \\sin\\left(\\frac{n\\pi x}{L}\\right) \\,dx, \\quad n = 1, 2, 3, \\cdots\n",
    "$$\n",
    "\n",
    "## 矩阵指数\n",
    "对于一个 \\(n\\times n\\) 的矩阵 \\(A\\)，矩阵指数 \\(e^A\\) 定义为：\n",
    "$$\n",
    "e^A = \\sum_{k = 0}^{\\infty} \\frac{1}{k!} A^k = I + A + \\frac{1}{2!} A^2 + \\frac{1}{3!} A^3 + \\cdots\n",
    "$$\n",
    "其中 \\(I\\) 是 \\(n\\times n\\) 的单位矩阵，\\(A^k\\) 表示矩阵 \\(A\\) 的 \\(k\\) 次幂。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e4d433d2-be97-46de-84e0-e56833441ae4",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
